import {designPage} from "plain-design-composition";
import {useTableOption} from "../../../module/useTableOption";
import {AutoTable, Plc, PlcDate, PlcInput, PlcNumber, PlcSelect, SelectOption} from "../../../../packages";

export const demo1 = designPage(() => {

  const option = useTableOption({
    url: '/demo',
    fill: true,
  });


  const onClick = () => {
    console.log('click');
  };

  const selectOptions = [
    { label: '消费者', status: 'consumer' },
    { label: '潜在客户', status: 'potential' },
    { label: '门店', status: 'store' },
  ];

  const filterConfig = {
    // formItemAttrs: { column: 2 }
  };

  return () => (
    <AutoTable option={option}>
      <Plc title="编号" field="id" link onClick={onClick} hideInForm filterConfig={filterConfig}/>
      <PlcDate title="创建时间" field="createdAt" hideInForm width={200} editable={false} datetime/>
      <PlcDate title="更新时间" field="updatedAt" hideInForm width={200} editable={false} datetime/>
      <PlcDate title="日期" field="dateVal" displayFormat="YYYY年MM月DD日"/>
      <PlcNumber title="计数" field="count" required/>
      <PlcInput
        title="文本" field="normalText" required width={150} fixed="left" filterConfig={filterConfig}
        v-slots={{
          normal: ({ row }) => (
            <span>[{row.normalText}]</span>
          )
        }}
      />
      <PlcNumber title="数字" field="numberVal"/>
      <PlcSelect title="下拉选择" field="selectVal">
        {selectOptions.map((item) => (
          <SelectOption children={item.label} value={item.status} key={item.status}/>
        ))}
      </PlcSelect>
    </AutoTable>
  );
});
